'use client';

import React, { useState } from 'react';
import { Button, Card, Typography, Space, Alert } from 'antd';
import { pingCodeAPI } from '../../utils/pingcodeApi';

const { Title, Paragraph } = Typography;

export default function ApiTestPage() {
  const [result, setResult] = useState<any>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const testApi = async (testName: string, apiCall: () => Promise<any>) => {
    setLoading(true);
    setError(null);
    setResult(null);

    try {
      console.log(`开始测试: ${testName}`);
      const data = await apiCall();
      setResult({ testName, data });
      console.log(`测试成功: ${testName}`, data);
    } catch (err) {
      const errorMsg = err instanceof Error ? err.message : String(err);
      setError(`${testName} 失败: ${errorMsg}`);
      console.error(`测试失败: ${testName}`, err);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="p-6 max-w-4xl mx-auto">
      <Title level={2}>PingCode API 连接测试</Title>
      
      <Card className="mb-4">
        <Title level={4}>API 配置信息</Title>
        <Paragraph>
          <strong>API URL:</strong> {process.env.NEXT_PUBLIC_PINGCODE_API_URL || '未配置'}
        </Paragraph>
        <Paragraph>
          <strong>Access Token:</strong> {process.env.NEXT_PUBLIC_PINGCODE_ACCESS_TOKEN ? 
            `${process.env.NEXT_PUBLIC_PINGCODE_ACCESS_TOKEN.substring(0, 8)}...` : '未配置'}
        </Paragraph>
      </Card>

      <Card>
        <Title level={4}>API 测试</Title>
        <Space wrap>
          <Button 
            type="primary" 
            loading={loading}
            onClick={() => testApi('获取项目列表', () => pingCodeAPI.getProjects({ page_size: 5 }))}
          >
            测试获取项目列表
          </Button>
          <Button 
            loading={loading}
            onClick={() => testApi('获取工作项列表', () => pingCodeAPI.getWorkItems({ page_size: 5 }))}
          >
            测试获取工作项列表
          </Button>
          <Button 
            loading={loading}
            onClick={() => testApi('获取工作项类型', () => pingCodeAPI.getWorkItemTypes())}
          >
            测试获取工作项类型
          </Button>
          <Button 
            loading={loading}
            onClick={() => testApi('获取用户列表', () => pingCodeAPI.getUsers({ page_size: 5 }))}
          >
            测试获取用户列表
          </Button>
        </Space>
      </Card>

      {error && (
        <Alert 
          type="error" 
          message="API 调用错误" 
          description={error} 
          className="mt-4" 
          showIcon 
        />
      )}

      {result && (
        <Card className="mt-4">
          <Title level={4}>测试结果: {result.testName}</Title>
          <pre style={{ 
            background: '#f5f5f5', 
            padding: '16px', 
            borderRadius: '4px',
            overflow: 'auto',
            maxHeight: '400px'
          }}>
            {JSON.stringify(result.data, null, 2)}
          </pre>
        </Card>
      )}
    </div>
  );
}